
{{ define "public/index.html" }}

<!DOCTYPE html>
<html lang="en">
  {{ template "index/header.html" .}}
<body>
  <h1> HTML 模板渲染延时示例 </h1>
  <div>
    {{/* 我是模板注释说明，我并不会显示 */}}
    <h4>1.数据输出延时</h4>
    <p>网名：{{.username}}</p>
    <p>网龄：{{ $wl := .username_age }} {{$wl}}</p>
    <p>个人介绍：</p>
    <textarea name="introduction" id="introduction" cols="50" rows="10">{{- .username_introduction -}}</textarea>
  </div><hr>

  <div>
    <h4>2.条件判断示例</h4>
    {{if eq .arg1 .arg2}} 
      <p> {{.arg1}} 等于 {{.arg2}} </p> 
    {{ else }} 
      <p> {{.arg1}} 不等于 {{.arg2}}</p> 
    {{end}}
  </div> <hr>

  <div>
    <h4>3.遍历循环示例</h4>
    <ul>
      {{range $key, $value := .hobby}}
        <li style="color:rgb(38, 183, 240)">{{$key}} - {{$value}}</li>
      {{else}}
        <li style="color:white">列表为空</li>
      {{end}}
    </ul>
  </div><hr>

  <div>
    <h4>4.结构体输出</h4>
    <!-- 传统方式输出结构体 -->
    <p>{{.user.Name}}</p>
    <p>{{.user.Gender}}</p>
    <p>{{.user.Age}}</p>

    <!-- 使用 with 输出结构体 -->
    {{with .user}}
      <p>姓名：{{.Name}}</p>
      <p>性别：{{.Gender}}</p>
      <p>年龄：{{.Age}}</p>
    {{end}}
  </div><hr>

  <div>
    <h4>5.预定义函数</h4>
    <p>标题 {{.page_title}} ，长度：{{.page_title}} </p>
    <p>爱好【1】：{{index .hobby 1}} </p>
  </div>

  <div>
    <p> 日期：{{.nowDateTime | formatDate}} </p>
    <p> 时间：{{.nowDateTime | formatTime}} </p>
  </div><hr>

  {{ template "index/footer.html" .}}
</body>
</html>

{{ end }}